<template>
	<div class="m-content">
		<AppHeader></AppHeader>
		<div class="m-register">	
			<div class="warp">
				<div class="m-register-w f-cb">
					<div class="m-register-top f-cb">
						<p class="f-fl m-register-r">欢迎注册</p>  <p class="f-fr">已有账号，<a href="/login" class="m-register-l">立即登录</a></p>
					</div>
					<div class="m-register-input">
						<img class="m-register-tx" src="../../assets/images/tx.png" />
						<div class="m-form-gloup" :class="{error: validation.hasError('userName')}">
							<input type="text" class="" name="username" v-model="username"  value=""  placeholder="账户名" />
							<p class="m-form-error f-tal">{{ validation.firstError('userName') }} {{ message }}</p>
						</div>
						<div class="m-form-gloup">
							<input type="password" class="" name="password" v-model="password" value=""  placeholder="密码" />
							<p class="m-form-error f-tal">{{ validation.firstError('passWord') }}</p>
						</div>
						<div class="m-form-gloup">
							<input type="text" class="" name="name" v-model="name" value=""  placeholder="真实姓名" />
							<p class="m-form-error f-tal">{{ validation.firstError('name') }}</p>
						</div>
						<div class="m-form-gloup">
							<input type="text" class="" name="phone" v-model="phone" value=""  placeholder="电话" />
							<p class="m-form-error f-tal">{{ validation.firstError('phone') }}</p>
						</div>
						<div class="m-form-gloup f-cb">
							<input type="text" class="" name="opening_bank" value="" v-model="openingBank"  placeholder="开户行" />
							<p class="m-form-error f-tal">{{ validation.firstError('openingBank') }}</p>
						</div>
						<div class="m-form-gloup">
							<input type="text" class="" name="bank_card_number" value="" v-model="bankCardNumber"  placeholder="银行卡号" />
							<p class="m-form-error f-tal">{{ validation.firstError('bankCardNumber') }}</p>
						</div>
						<div class="m-form-gloup">
							<div class="m-code-left">
								<input type="text" class="m-register-code" name="" value=""  v-model="code" placeholder="验证码" />
								<p class="m-form-error f-tal">{{ validation.firstError('code') }} {{ codemsg }}</p>
							</div>
							<img class="m-verifyimg" v-bind:src=imgcode  @click="test" width="160" height="48" />
						</div>									
						<div class="m-login-btn" @click="register">注册完毕</div>
					</div>					
				</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>
<script>
	import Vue from 'vue';
	import { Message } from 'element-ui';
	import AppHeader from '@/components/Header';
	import Footer from '@/components/Footer';
	var SimpleVueValidation = require('simple-vue-validator');
	var Validator = SimpleVueValidation.Validator;
	Vue.use(SimpleVueValidation);	
	export default {
		name: 'register',
		components: {
		  AppHeader,
		  Footer, 
		},
		data() {
			return {
			  	'username':'',
			  	'password':'',
			  	'name':'',
			  	'phone':'',
			  	'openingBank':'',
			  	'bankCardNumber':'',
			  	'message':'',
			  	'codemsg':'',
			  	'code':'',
			  	'imgcode':'/yan-web/code/verificationCode',
			}
		},
		validators:{
	 		username: function(value) {
	 			var that = this;
	        	return Validator.custom(function () {
	        		if(Validator.isEmpty(value)){
	        			return '账户名不能为空';
	        		};
		        });
	      	},
	      	password:function(value){
	        	return Validator.custom(function () {
	        		if(Validator.isEmpty(value)){
	        			return '密码不能为空';
	        		}
		        });	      	
	      	},
	      	name:function(value){
	      		return Validator.custom(function () {
	      			var reg = /^[\u4E00-\u9FA5]{2,4}$/;
	        		if(!reg.test(value)){
	        			return '请填写正确的真实姓名';
	        		}
		        });
	      	},
	      	phone:function(value){
	        	return Validator.custom(function () {
	        		var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
	        		if(!myreg.test(value)){
	        			return '请填写正确手机号码';
	        		}
		        });
	      	},
	      	openingBank:function(value){
				return Validator.custom(function () {
	        		if(Validator.isEmpty(value)){
	        			return '开户行不能为空';
	        		}
		        });	 
	      	},
	      	bankCardNumber:function(value){
	      		return Validator.custom(function () {
	        		var myreg = /^\d+(\.\d+)?$/;
	        		if(!myreg.test(value)){
	        			return '请填写正确银行卡号';
	        		}
		        });
	      	},
	      	code:function(value){
				return Validator.custom(function () {
	        		if(Validator.isEmpty(value)){
	        			return '验证码不能为空';
	        		}
		        });	      		
	      	}	      				
		},
		created:function(){
		
		},		
		methods: {
			register: function() {
				var that = this;
		        that.$validate()//验证
				.then(function (success) {
					var result = {
						'username':that.username,
						'password':that.password,
						'name':that.name,
						'phone':that.phone,
						'openingBank':that.openingBank,
						'bankCardNumber':that.bankCardNumber,
						'verifyCode':that.code,
					};				
					if(success) {
						that.axios.post('/yan-web/volunteers/register',result,{
						    headers: {
						          'Content-type': 'application/json;charset=UTF-8'
						    }
						}) 
						.then(function (response) {
							if(response.data.status){
								that.$message({
						          message: '恭喜你，注册成功！',
						          type: 'success'
	        					});
								that.username = '';
								that.password = '';
								that.name = '';
								that.phone = '';
								that.openingBank = '';
								that.bankCardNumber = '';
								that.message = '';
								that.code ='';				
								that.validation.reset();
								that.$router.push({ path: '/login'});
							}else{
								if(response.data.message == '1'){
									that.message="账户名已经存在";
								}else if(response.data.message == '2'){
									that.codemsg="验证码错误";
								}
							}
						}) 
					}else{
	
					}
				});
			},
			test:function(){
				var timestamp = Date.parse(new Date());
				console.log(timestamp);
				var that = this;
				that.axios.get('/yan-web/code/verificationCode',{
				    headers: {
				          'Content-type': 'application/json;charset=UTF-8'
				    }
				}) 
				.then(function (response) {
					that.imgcode = '/yan-web/code/verificationCode?timestamp='+ timestamp ;
				})	

			}
		}	
	}	
</script>